<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>点名器</title>
		<style type="text/css">
			h2{
				text-align: center;
			}
			#box{
				width: 300px;
				height: 150px;
				border: 2px solid red;
				background-color: aquamarine;
				text-align: center;
			}
			#uname{
				
				width: 100px;
				height: 50px;
				
				background-color: #FF0000;
				//设置div块，水平居中
				margin: 0 auto;
				margin-top: 30px;
				text-align: center;//设置水平居中
				line-height: 50px;//文本垂体居中
				font-weight: bold;//字体加粗
				font-size: 30px;//设置字体大小
			}
			#begain{
				display: block;
				margin: 20px auto;
				
			}
		</style>
	</head>
	<body>
		<h2>点名器</h2>
		<div id="box">
			<div id="uname" align="center">姓名</div>
			<button id="begain">开始</button>
		</div>
		<script type="text/javascript">
			//定义数组
			var arr = ['李白','杜甫','韩愈','柳宗元','欧阳修','苏洵','苏轼','苏辙','王安石','曾巩','陶渊明','辛弃疾','李贺','陆游'];
			//获取前面元素
			var uname = document.getElementById("uname");
			var flag = null;
			var btn = document.getElementsByTagName("button")[0];
			bin.onclick = (function(){
				if(btn.innerText=="开始"){
					bin.innerHTML="结束";
					flag = setInterval(function(){
						var num = rand(0,arr.length-1);
						
						var uname = arr[num];
						
						uname.innerHTML=unname;
					},100)
				}else{
					bin.innerHTML="开始";
					clearInterval(flag);
				}
			};
			
			function rand(n,m){
				return Math.floor(Math.random() * (m-n+1));
			}
		</script>
	</body>
		
</html>
